<template>
  <el-card class="box-card">
    <!-- 提示栏上方部分 -->
    <FavorQuestionsTitle
    :form='reqForm'
    @clearForm='clearForm'
    @searchRes='searchRes'
    ></FavorQuestionsTitle>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="-1">
        <!-- 灰色提示栏 -->
        <el-alert
          type="info"
          show-icon
          :closable="false"
          >
          数据一共{{total}}条
        </el-alert>
        <!-- 显示区域 -->
        <FavorQuestionsBody
        :reqForm='reqForm'
        @transTotal='total=$event'
        @loadList='loadbaseList'
        :baseList='baseList'
        :total='total'
        ></FavorQuestionsBody>
      </el-tab-pane>
      <el-tab-pane label="待审核" name="0">
        <!-- 灰色提示栏 -->
        <el-alert
          type="info"
          show-icon
          :closable="false"
          >
          数据一共{{total}}条
        </el-alert>
        <FavorQuestionsBody
        :reqForm='reqForm'
        @transTotal='total=$event'
        @loadList='loadbaseList'
        :baseList='baseList'
        :total='total'
        ></FavorQuestionsBody>
      </el-tab-pane>
      <el-tab-pane label="已审核" name="1">
        <!-- 灰色提示栏 -->
        <el-alert
          type="info"
          show-icon
          :closable="false"
          >
          数据一共{{total}}条
        </el-alert>
        <FavorQuestionsBody
        :reqForm='reqForm'
        @transTotal='total=$event'
        @loadList='loadbaseList'
        :baseList='baseList'
        :total='total'
        ></FavorQuestionsBody>
      </el-tab-pane>
      <el-tab-pane label="已拒绝" name="2">
        <!-- 灰色提示栏 -->
        <el-alert
          type="info"
          show-icon
          :closable="false"
          >
          数据一共{{total}}条
        </el-alert>
        <FavorQuestionsBody
        :reqForm='reqForm'
        @transTotal='total=$event'
        @loadList='loadbaseList'
        :baseList='baseList'
        :total='total'
        ></FavorQuestionsBody>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import FavorQuestionsTitle from '../components/FavorQuestionsTitle.vue'
import FavorQuestionsBody from '../components/FavorQuestionsBody.vue'
import { choice as loadbaseList } from '@/api/hmmm/questions'

export default {
  components: {
    FavorQuestionsTitle,
    FavorQuestionsBody
  },

  data () {
    return {
      reqForm: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: null
      },
      total: 2,
      baseList: [],
      activeName: '-1'
    }
  },

  created () {
    this.loadbaseList()
  },

  methods: {
    clearForm () {
      this.reqForm = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: null
      }
    },
    searchRes (e) {
      this.total = e.counts
      this.baseList = e.items
    },
    async loadbaseList () {
      const res = await loadbaseList(this.reqForm)
      console.log(res)
      this.baseList = res.data.items
      this.total = res.data.counts
      // this.$emit('transTotal', res.data.counts)
    },
    // 标签页切换
    async handleClick () {
      console.log(this.activeName)
      this.reqForm.page = 1
      this.reqForm.chkState = this.activeName
      if (this.activeName === '-1') {
        this.reqForm.chkState = null
      }
      this.loadbaseList()
    }
  }
}
</script>

<style scoped lang='less'>
.box-card{
  margin: 10px;
}

/deep/.el-alert__icon{
  font-size: 16px !important;
  width: 16px !important;
}
</style>
